<template>
	<view class="boiling">
		<TnNavbar fixed bg-color="#16171b" text-color="#FFFFFF" home-icon="" back-text="  " :before-back="beforeBack">
			熬制鸡汤
		</TnNavbar>
		<view class="boiling_item" style="margin-top: 20rpx;">
			<view class="boiling_item_top">
				<view class="icon">
					<TnIcon name="orange" type="primary" color="#ffffff" size="60rpx" />
				</view>
				<view class="title">鸡汤配料~</view>
			</view>
			<textarea class="textarea" v-model="content" placeholder="请输入鸡汤内容"
				placeholder-style="color:#ffffff"></textarea>
		</view>
		<view class="boiling_item">
			<view class="boiling_item_top">
				<view class="icon">
					<TnIcon name="tree" type="primary" color="#ffffff" size="60rpx" />
				</view>
				<view class="title">添加出处~</view>
			</view>
			<view class="excerpt">
				<input type="text" v-model="excerpt" placeholder="如:朝花夕拾" placeholder-style="color:#ffffff" />
			</view>
		</view>
		<view class="boiling_item">
			<view class="boiling_item_top">
				<view class="icon">
					<TnIcon name="windmill" type="primary" color="#ffffff" size="60rpx" />
				</view>
				<view class="title">鸡汤封面~</view>
			</view>
			<view class="imageUpload" @click="uploadHandle">
				<view class="imagebox" v-if="!imageList">
					<TnIcon name="add-rhombus" type="primary" color="#ffffff" size="60rpx" />
				</view>
				<view class="imagebox_sn" v-else>
					<image :src="imageList" mode="aspectFill"></image>
				</view>

			</view>
		</view>
		<view class="boiling_item">
			<view class="boiling_item_top">
				<view class="icon">
					<TnIcon name="leaf" type="primary" color="#ffffff" size="60rpx" />
				</view>
				<view class="title">鸡汤种类~</view>
			</view>
			<view class="tbas">
				<view class="tbas_item" :class="activeId==0?'active':''" @click="setBiling(0)">
					<TnIcon name="skull" type="primary" color="#ffffff" size="30rpx" />
					毒鸡汤
				</view>
				<view class="tbas_item" :class="activeId==1?'active':''" @click="setBiling(1)" style="color:#24f083">
					<TnIcon name="pacman" type="primary" color="#24f083" size="30rpx" />
					心灵鸡汤
				</view>
			</view>
		</view>
		<view class="release" @click="release">
			<view class="release_text">发布</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import TnNavbar from '@/uni_modules/tuniaoui-vue3/components/navbar/src/navbar.vue'
	import TnRadio from '@/uni_modules/tuniaoui-vue3/components/radio/src/radio.vue'
	import TnRadioGroup from '@/uni_modules/tuniaoui-vue3/components/radio/src/radio-group.vue'
	import TnImageUpload from '@/uni_modules/tuniaoui-vue3/components/image-upload/src/image-upload.vue'
	import TnIcon from '@/uni_modules/tuniaoui-vue3/components/icon/src/icon.vue'
	const db = uniCloud.database()
	const soup_type = ref('')
	const imageList = ref("")
	const content = ref("")
	const excerpt = ref("")
	const uploadHandle = () => {
		uni.showLoading({
			title: '上传中请稍后',
			mask: true
		})
		uni.chooseImage({
			count: 1, //默认9
			success: (res) => {
				console.log(res);
				uniCloud.uploadFile({
					cloudPath: `${res.tempFiles[0].size}.png`,
					filePath: res.tempFilePaths[0],
					async success(res) {
						// imageList.value = res.fileID
						
						let result = await uniCloud.getTempFileURL({
							fileList: [res.fileID]
						});
						console.log(result);
						imageList.value = result.fileList[0].tempFileURL
						uni.hideLoading()
					},
					fail() {
						uni.hideLoading()
					}
				})
			}
		});


	}

	const release = async () => {
		console.log(content.value)
		if (content.value == '') {
			return uni.showToast({
				title: '请输入鸡汤内容~',
				icon: 'none'
			})

		} else if (excerpt.value == '') {
			return uni.showToast({
				title: '请输入鸡汤出处~',
				icon: 'none'
			})
		} else if (imageList.value == '') {
			return uni.showToast({
				title: '请上传鸡汤封面~',
				icon: 'none'
			})
		}
		const res = await db.collection("boiking").add({
			soup_type: Number(soup_type.value),
			cover: imageList.value,
			content: content.value,
			from: excerpt.value
		})
		if (res.result.code == 0) {
			console.log(res);
			uni.reLaunch({
				url:"/pages/index/index?id="+1
			})
		}

	}
	const activeId = ref(0)
	const setBiling = (type) => {
		activeId.value = type
		soup_type.value = type
	}
	
	const beforeBack =() => {
		return new Promise((resolve) => {
		    setTimeout(() => {
		      resolve(false)
			  uni.redirectTo({
			  	url:"/pages/index/index?id="+1
			  })
		    }, 1000)
		  })
	}
</script>

<style lang="scss" scoped>
	.boiling {
		min-height: 100vh;
		background: #16171b;
		padding: 20rpx;
	}

	.boiling_item {
		.boiling_item_top {
			display: flex;
			align-items: center;

			.icon {
				height: 60rpx;
			}

			.title {
				font-size: 30rpx;
				color: #ffffff;
				font-family: MiSans, MiSans;
				margin-left: 10rpx;
				font-family: MiSans, MiSans;
			}
		}

		.textarea {
			color: #FFFFFF;
			padding: 20rpx;
			width: 100%;
			background: #28292e;
			margin-top: 20rpx;
			border-radius: 20rpx;
			margin-bottom: 50rpx;
			font-family: MiSans, MiSans;
		}

		.excerpt {

			input {
				color: #FFFFFF;
				width: 100%;
				height: 100rpx;
				margin-top: 20rpx;
				background: #28292e;
				border-radius: 20rpx;
				margin-bottom: 50rpx;
				padding-left: 20rpx;
				font-family: MiSans, MiSans;
			}
		}

		.imageUpload {
			margin-top: 20rpx;
			margin-bottom: 50rpx;

			.imagebox {
				display: flex;
				align-items: center;
				justify-content: center;

				width: 230rpx;
				height: 320rpx;

				border-radius: 20rpx;
				border: 2rpx solid #28292e;

			}

			.imagebox_sn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 230rpx;
				height: 320rpx;
				border-radius: 20rpx;
				overflow: hidden;

			}
		}

		.tbas {
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			margin-bottom: 120rpx;

			.active {
				border: 2rpx solid #FFFFFF !important;

			}

			.tbas_item {
				border-radius: 10rpx;
				padding: 6rpx 12rpx;
				background: #28292e;
				color: #ffffff;
				font-size: 30rpx;
				font-family: MiSans, MiSans;
				margin-right: 20rpx;
				border: 2rpx solid transparent;
			}
		}
	}

	.release {
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: calc(constant(safe-area-inset-bottom));
		bottom: calc(env(safe-area-inset-bottom));
		width: 560rpx;
		height: 90rpx;

		.release_text {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 560rpx;
			height: 90rpx;
			background: #28292e;
			border-radius: 20rpx;
			color: #FFFFFF;
			font-size: 32rpx;
			font-family: MiSans, MiSans;
		}
	}
</style>